<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background-color: black;
            /*鼠标样式*/
            cursor:url(up.png),auto;
            /*不让用户选择*/
            -moz-user-select:  none;
            -webkit-user-select: none;
        }
        table{
            margin: 0 auto;
            /*background-color: rgba(255,255,255, 0.3);*/
        }
        td{
            width: 200px;
            height: 200px;
            background-image: url(hole.png);
            background-repeat: no-repeat;
            background-size: 190px 80px;
            background-position: bottom;
            text-align: center;
        }
        img{
            width: 180px;
            height: 110px;
            position: relative;
            top:20px;
            transform: scale(1,0);
            transform-origin: 50% 100%;
            transition: all 0.3s linear;
        }
        .appear{
            transform: scale(1,1);
        } 
        #f{
            color: wheat;
            font-size: 50px;
            height: 80px;
            width: 800px;
            /*position: absolute;*/
            margin: 0 auto;           
        }                
    </style>
</head>
<body>
    <div id="f">得分：0</div>
    <table>
        <tr>
            <td><img src="panda.png" alt=""></td>
            <td><img src="panda.png" alt=""></td>
            <td><img src="panda.png" alt=""></td>
            <td><img src="panda.png" alt=""></td>
        </tr>
        <tr>
            <td><img src="panda.png" alt=""></td>
            <td><img src="panda.png" alt=""></td>
            <td><img src="panda.png" alt=""></td>
            <td><img src="panda.png" alt=""></td>
        </tr>
        <tr>
            <td><img src="panda.png" alt=""></td>
            <td><img src="panda.png" alt=""></td>
            <td><img src="panda.png" alt=""></td>
            <td><img src="panda.png" alt=""></td>
        </tr>
        <tr>
            <td><img src="panda.png" alt=""></td>
            <td><img src="panda.png" alt=""></td>
            <td><img src="panda.png" alt=""></td>
            <td><img src="panda.png" alt=""></td>
        </tr>
    </table>
    <script>
        var panda = document.getElementsByTagName("img");
        var fen =document.getElementById("f");
        var f=0;
        function show(){
            var n = Math.random();
            n*=16;
            n=Math.floor(n);
            panda[n].classList.add("appear");
            panda[n].ttt=true;
            setTimeout(function(){
                panda[n].classList.remove("appear");            
            },5000);
            // panda[n].setAttribute("onclick","downClick()");
            // var a=document.querySelectorAll("downClick()");
            // a.onclick=function downClick(){
            //     panda[n].classList.remove("appear"); 
            // }
            
        }
        setInterval(function(){
                show();
                show();   
        },1000);

        for(var i=0;i<panda.length;i++){
            function d(e){
                e.target.classList.remove("appear");  
                if(e.target.ttt){
                    f=f+10;
                    fen.textContent="得分："+f;
                    e.target.ttt=false;
                    // 点击同样的熊猫不多次记分
                }
            }
            panda[i].onclick=d;     
        }
        document.onmousedown=function(e){
            document.body.style.cursor="url(up.png),auto";
        }
        document.onmouseup=function(e){
            document.body.style.cursor="url(down.png),auto";
        }
        
        

       

    </script>
    
</body>
</html>